<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .top {
        width: 400px;
        height: 400px;
        margin: 50px auto;
        color: #fff;
        text-align: center;
        background-color: rgb(74, 202, 109);
        line-height: 400px;
    }

    .top h1 {
        font-size: 180px;
        font-weight: 400;
        animation: text .5s;
    }


    @keyframes text {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(1);
        }
    }

    .botton {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .text {
        font-size: 30px;
        color: orange;
    }
</style>

<body>

    <div class="top">
        <h1>A</h1>
    </div>
    <div class="botton">
        <div class="text"></div>
    </div>


    <script>
        let data = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

        function random(max, min = 0) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }


        const div = document.getElementsByClassName('top')[0]
        const text = document.getElementsByClassName('text')[0]
        let succeed = 0
        let amount = 1
        div.innerHTML = `<h1>${data[random(data.length - 1)]}</h1>`
        text.innerHTML = calculate()
        document.onkeypress = (e) => {
            if (e.key === div.children[0].innerHTML) {
                div.children[0].style.color = '#fff'
                div.innerHTML = `<h1>${data[random(data.length - 1)]}</h1>`
                succeed += 1
                text.innerHTML = calculate()
            } else {
                div.children[0].style.color = 'red'
                text.innerHTML = calculate()
            }
            amount += 1
        }

        function calculate() {
            return `正确率${(succeed / amount * 100).toFixed(2)}%`
        }
    </script>
</body>

</html>